<template>
  <div class="followup_page">

    <el-tabs v-model="activeName">
      <!-- 基本资料 开始 -->
      <el-tab-pane label="基本资料" name="1">
        <el-form class="el_form" :model="selectItem" label-width="120px">
          <el-form-item label="姓名：">
            <span class="name">{{selectItem.customer?selectItem.customer.name:''}}</span>
            <el-button type="primary" size="mini" @click="callPhone(selectItem.customer)">一键拨号</el-button>
            <el-button type="primary" size="mini" :disabled="disabledSign()" @click="goSign()">签约</el-button>
          </el-form-item>
          <el-form-item label="状态：">
            <span>{{FOLLOWUPOPTIONS[selectItem.process]}}</span>
          </el-form-item>
          <el-form-item label="电话：">
            <span>{{selectItem.customer?selectItem.customer.mobile:''}}</span>
          </el-form-item>
          <el-form-item label="城市：">
            <span>{{selectItem.customer?selectItem.customer.city:''}}</span>
          </el-form-item>
          <el-form-item label="入库日期：">
            <span>{{selectItem.customer?selectItem.customer.createDate:''}}</span>
          </el-form-item>
          <el-form-item label="分配日期：">
            <span>{{selectItem.customer?selectItem.customer.distributeDate:''}}</span>
          </el-form-item>
          <el-form-item v-for="(item,fieldIndex) in fieldList" :key="fieldIndex" :label="`${item.fieldName}：`">
            <template v-if="item.type===2">
              <el-select v-model="selectItem.customer['field'+(fieldIndex+1)]" clearable :placeholder="item.fieldName">
                <el-option v-for="kitem in item.value" :key="kitem" :label="kitem" :value="kitem" />
              </el-select>
            </template>
            <template v-else>
              <el-input v-model="item.value1" :placeholder="item.fieldName"></el-input>
            </template>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 基本资料 end -->
      <!-- 跟进记录 开始 -->
      <el-tab-pane label="跟进记录" name="2">
        <el-scrollbar class="el_scroll">
          <div class="textarea_box">
            <div class="area_box">
              <el-input type="textarea" class="" :rows="3" :resize="inputResize" v-model="input" placeholder="请输入跟进记录，不超过50个字"></el-input>
            </div>
            <el-button type="primary" size="small" :disabled="!input" @click="sendMessage()">保存跟进记录</el-button>
          </div>
          <div class="follow_list">
            <div class="cell" v-for="(item,index) in selectItem.remarkList" :key="index">
              <div class="title">
                <span class="name">{{item.createBy}}</span>
                <span class="time">{{item.updateDate}}</span>
                <span>发布跟进记录：</span>
              </div>
              <div class="txt_content">
                {{item.remark}}
              </div>
            </div>
          </div>
        </el-scrollbar>
      </el-tab-pane>
      <!-- 跟进记录 end -->

      <!-- 客户跟进资料 开始 -->
      <el-tab-pane label="客户跟进资料" name="3">
        <el-form class="el_form" :model="selectItem" label-width="120px">
          <el-form-item label="进度">
            <el-select v-model="selectItem.process" clearable placeholder="跟进状态">
              <el-option v-for="item in BEHINDSTATUSLIST" :key="item.id" :label="item.name" :value="item.id" />
              <!-- <el-option v-for="item in statusList" :key="item.status" :label="item.desc" :value="item.status" /> -->
            </el-select>
          </el-form-item>
          <el-form-item label="通话状态">
            <el-select v-model="selectItem.call" clearable placeholder="通话状态">
              <el-option v-for="item in PASSOPTIONSLIST" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否是有效客户">
            <el-select v-model="selectItem.fit" clearable placeholder="是否有效">
              <el-option v-for="item in EFFECTIVEOPTIONS" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="预约上门">
            <el-date-picker v-model="selectItem.appointmentDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item> -->
          <el-form-item label="客户条件" class="el_long">
            <el-input type="textarea" :rows="5" :resize="inputResize" v-model="selectItem.remark" placeholder="请输入内容"></el-input>
          </el-form-item>
          <!-- <el-form-item label="跟进记录">
          <el-input type="textarea" :rows="5" :resize="inputResize" v-model="input" placeholder="请输入跟进记录，不超过50个字"></el-input>
        </el-form-item> -->
          <el-form-item label="上传跟进资料" class="el_long">
            <div class="upload_box">
              <div class="image_cell">
                <el-upload class="avatar-uploader" :action="UPLOADFILEPATH" :show-file-list="false" :on-success="(response) => onSuccess(response,'idcardFront')">
                  <img v-if="selectItem.idcardFront" :src="selectItem.idcardFront" class="avatar">
                  <div class="upload_tips" v-else>
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                    <span>上传身份证正面</span>
                  </div>
                </el-upload>
                <span class="name">身份证正面</span>
              </div>
              <div class="image_cell">
                <el-upload class="avatar-uploader" :action="UPLOADFILEPATH" :show-file-list="false" :on-success="(response) => onSuccess(response,'idcardBack')">
                  <img v-if="selectItem.idcardBack" :src="selectItem.idcardBack" class="avatar">
                  <div class="upload_tips" v-else>
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                    <span>上传身份证反面</span>
                  </div>
                </el-upload>
                <span class="name">身份证反面</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="必备资料" class="el_long">
            <div class="upload_box">
              <div class="image_cell">
                <el-upload class="avatar-uploader" :action="UPLOADFILEPATH" :show-file-list="false" :on-success="(response) => onSuccess(response,'authorizeFile')">
                  <img v-if="selectItem.authorizeFile" :src="selectItem.authorizeFile" class="avatar">
                  <div class="upload_tips" v-else>
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                    <span>上传授权书</span>
                  </div>
                </el-upload>
                <span class="name">授权书</span>
              </div>
              <div class="image_cell">
                <el-upload class="avatar-uploader" :action="UPLOADFILEPATH" :show-file-list="false" :on-success="(response) => onSuccess(response,'creditFile')">
                  <img v-if="selectItem.creditFile" :src="selectItem.creditFile" class="avatar">
                  <div class="upload_tips" v-else>
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                    <span>上传征信报告</span>
                  </div>
                </el-upload>
                <span class="name">征信报告</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="其他资料" class="el_long">
            <div class="upload_box">
              <el-upload class="avatar-uploader" :action="UPLOADFILEPATH" list-type="picture-card" :file-list="otherFile" :on-success="onFileSucess" :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 客户跟进资料 end -->

      <!-- 客户需求跟进 开始 -->
      <el-tab-pane label="客户需求跟进" name="4">

        <el-table :data="selectItem.productList" border size="small">
          <el-table-column label="id" prop="productId"></el-table-column>
          <el-table-column label="产品" prop="productName"></el-table-column>
          <el-table-column label="备注" prop="remark"></el-table-column>
          <el-table-column label="进度" prop="process">
            <template slot-scope="{row}">{{PRODUCTPROCESSLIST[row.process]}}</template>
          </el-table-column>
          <el-table-column label="完成凭证" prop="certificate">
            <template slot-scope="{row}">
              <el-image class="el_img" :src="row.certificate" :preview-src-list="[row.certificate]" v-if="row.certificate"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="" width="240" align="center">
            <template slot-scope="{row}">
              <div class="links_box">
                <el-button type="primary" size="mini" v-if="row.process != 2" @click="updateProduct(row,1,$index)">处理中</el-button>
                <el-button type="primary" size="mini" v-if="row.process != 2" @click="updateProduct(row,2,$index)">完成</el-button>
                <el-upload class="upload-demo" :action="UPLOADFILEPATH" :show-file-list="false" :on-success=" e=> onFileSuccess(e,row,$index)">
                  <el-button type="primary" size="mini">上传凭证</el-button>
                </el-upload>
              </div>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>
      <!-- 客户需求跟进 end -->

    </el-tabs>

  </div>
</template>
<script>
import {
  SAVECUSTOMERFILES,
  updateCustomer,
  UPLOADFILEPATH,
  GETCUSTOMERSTATUS,
  UPDATEPRODUCTPROCESS,
  BEHINDADDREMARK
} from '@/api/customer'
import {
  FOLLOWUPOPTIONSLIST,
  FOLLOWUPOPTIONS,
  PASSOPTIONSLIST,
  EFFECTIVEOPTIONS,
  PRODUCTPROCESSLIST,
  BEHINDSTATUSLIST
} from '@/common/constants'
import moment from 'moment'
import { showToast } from '@/utils/util'
export default {
  name: 'FollowUp',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      activeName: '1',
      selectItem: {},
      FOLLOWUPOPTIONSLIST: FOLLOWUPOPTIONSLIST,
      BEHINDSTATUSLIST,
      FOLLOWUPOPTIONS: FOLLOWUPOPTIONS,
      PASSOPTIONSLIST: PASSOPTIONSLIST,
      EFFECTIVEOPTIONS: EFFECTIVEOPTIONS,
      fieldList: this.$store.state.myClient.fieldList,
      inputResize: 'none',
      UPLOADFILEPATH: UPLOADFILEPATH,
      value1: '',
      input: '',
      statusList: [],
      PRODUCTPROCESSLIST,
      otherFile: []
    }
  },
  mounted() {
    console.log(this.$store.state.myClient.fieldList)
    const o = this.data
    o.progress = o.progress ? o.progress.toString() : ''
    console.log(o)
    this.selectItem = o
    if (o.otherFile) {
      const m = o.otherFile.split(',')
      const arr = []
      m.map((k) => {
        arr.push({ name: k, url: k })
      })
      this.otherFile = arr
    }
    console.log(this.data)
    this.getStatus()
  },
  methods: {
    // 是否禁用去签约按钮
    disabledSign() {
      const o = this.selectItem
      if (
        !o.idcardFront ||
        !o.idcardBack ||
        !o.authorizeFile ||
        !o.authorizeFile
      ) {
        return true
      }
      return false
    },

    // 去签约
    goSign() {
      const o = this.selectItem
      this.$router.push({
        name: 'addContract',
        query: { name: o.name, mobile: o.mobile, id: o.id }
      })
    },

    // 上传其他资料
    onFileSucess(res, file, fileList) {
      if (res.code != 200) {
        return false
      }
      const list = this.otherFile || []
      list.push({ name: res.data, url: res.data })

      const arr = []
      list.map((k) => {
        arr.push(k.url)
      })
      this.saveFiles('otherFile', arr.toString())
    },

    // 监听文件上传成功
    onSuccess(res, id) {
      if (res.code == 200) {
        this.$set(this.selectItem, id, res.data)
        this.saveFiles(id, res.data)
      }
    },

    // 保存文件资料
    saveFiles(id, url) {
      if (!id || !url) {
        return false
      }
      const oParams = {}
      oParams.id = this.selectItem.id
      oParams[id] = url
      SAVECUSTOMERFILES(oParams)
    },

    // 保存数据
    saveInfo(type) {
      const _this = this
      // 编辑客户
      const { progress, id, level, remark, call, fit } = this.selectItem
      const form = { progress, id, level, remark, call, fit }

      if (this.value1) {
        // 预约上门时间
        form.appointmentDate = this.value1
      }
      for (const key in this.selectItem) {
        if (Object.hasOwnProperty.call(this.selectItem, key)) {
          if (key.indexOf('field') > -1) {
            form[key] = this.selectItem[key]
          }
        }
      }
      if (this.input) {
        form.customerRemark = { remark: this.input }
      }

      updateCustomer(form)
        .then((res) => {
          // this.$refs.params.search();
          this.$message.success(res.message)
          if (type) {
            this.insertInfo(res.data)
            return false
          }
          _this.$emit('change', true)
        })
        .catch(() => {
          _this.$emit('change')
        })
    },

    // 获取状态
    getStatus() {
      GETCUSTOMERSTATUS().then((res) => {
        this.statusList = res.data || []
      })
    },

    // 插入跟进信息
    insertInfo(str) {
      const list = this.selectItem.remarkList
      const o = {}
      o.createBy = str
      o.updateDate = moment().format('YYYY-MM-DD HH:mm:ss')
      o.remark = this.input
      list.unshift(o)
      this.$set(this.selectItem, 'remarkList', list)
      this.input = ''
    },

    // 更新产品状态
    updateProduct(row, id, idx) {
      const _this = this
      const oParams = {}
      oParams.id = row.id
      oParams.process = id || row.process
      oParams.certificate = row.certificate
      oParams.remark = row.remark
      UPDATEPRODUCTPROCESS(oParams).then((res) => {
        if (res.code == 200 && id) {
          showToast({
            message: '操作成功',
            type: 'success'
          })
          row.process = id
          _this.$set(this.selectItem, idx, row)
        }
      })
    },

    // 监听文件上传成功
    onFileSuccess(e, row, idx) {
      if (e.code != 200) {
        return false
      }
      showToast({
        message: '上传成功',
        type: 'success'
      })
      row.certificate = e.data
      this.$set(this.selectItem, idx, row)
      this.updateProduct(row)
    },

    // 添加跟进记录
    sendMessage() {
      const oParams = {}
      const o = this.selectItem
      oParams.customerId = o.customerId
      oParams.remark = this.input
      BEHINDADDREMARK(oParams).then((res) => {
        if (res.code == 200) {
          this.insertInfo(res.data)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.followup_page {
  .el_scroll {
    padding-bottom: 16px;
    ::v-deep .el-scrollbar__wrap {
      max-height: 600px;
      overflow-x: hidden;
    }
  }
}
.mt30 {
  margin-top: 30px;
}
.h2_title {
  position: relative;
  font-size: 18px;
  color: #333;
  font-weight: bold;
  padding: 10px 0;
  margin-bottom: 20px;
}
.h2_title:after {
  display: block;
  position: absolute;
  content: "";
  height: 1px;
  background: #d8d8d8;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleY(0.5);
}
.el_form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    flex: 0 0 50%;
    margin: 0 0 10px 0;
    .name {
      margin-right: 10px;
    }
  }
  .el_long {
    flex: 0 0 100%;
  }
}
.upload_box {
  display: flex;
  align-items: center;
  .image_cell {
    display: flex;
    flex-direction: column;
    width: 120px;
    margin: 0 10px 0 0;
    .name {
      text-align: center;
      color: #999;
    }
  }
  .avatar-uploader {
    // margin: 0 16px 0 0;
    height: 120px;
    ::v-deep .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      height: 120px;
      width: 120px;
    }
    ::v-deep .el-upload-list__item {
      height: 120px;
      width: 120px;
    }
    ::v-deep .el-upload--picture-card {
      height: 120px;
      width: 120px;
      line-height: 120px;
    }
    .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      text-align: center;
    }
    .avatar {
      width: 100%;
      height: 100%;
      display: block;
    }
    .upload_tips {
      height: 100%;
      display: flex;
      flex-direction: column;
      font-size: 12px;
      color: #999;
      align-items: center;
      justify-content: center;
    }
  }
}

.follow_list {
  .cell {
    position: relative;
    padding: 10px 0;
    margin: 10px 0;
    .title {
      display: flex;
      align-items: flex-end;
      font-size: 12px;
      color: #999;
      span {
        margin-right: 10px;
      }
      .name {
        font-size: 14px;
        color: #333;
        font-weight: bold;
      }
    }
    .txt_content {
      padding: 10px 0;
      // background:#f2f2f2;
      // border-radius:4px;
      font-size: 14px;
      color: #333;
    }
  }
  .cell:after {
    display: block;
    content: "";
    position: absolute;
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d8d8d8;
    transform: translateY(0.5);
    opacity: 0.4;
  }
  .cell:last-child:after {
    display: none;
  }
}
.textarea_box {
  display: flex;
  align-items: flex-start;
  // min-height: 360px;
  .area_box {
    flex: 1;
    padding-right: 30px;
  }
}
.links_box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.el_img {
  height: 40px;
}
</style>
